/**
 * User: Paulo Fournier
 * Date: 05-08-2013
 * Mobile view
 */

Ext.define('Mobile-app.view.Mobile', {
    extend: 'Ext.navigation.View',
    alias: 'widget.mobilepanel',

    config: {
        title: $.t('main.fleet'),
        iconCls: 'home',
        navigationBar: false,
        items: [
            {
                id: 'mobileList',
                fullscreen: true,
                xtype: 'list',
                cls: 'panel-letter',
                itemTpl: new Ext.XTemplate('<table border=0 width="100%">',
                    '<tr>',
                    '<td rowspan=3 width=30 align="center">',
                    '<tpl if="speed &gt; 0">',
                    '<img src="resources/icons/mov_go_n.png" style="width:15px; height:15px; position:relative; top:0px; -webkit-transform: rotate({route}deg);">',
                    '<br>{speed}</b>',
                    '<tpl else>',
                    '<img src="resources/icons/red.png">',
                    '</tpl>',
                    '</td>',
                    '<td><b>', $.t('main.alias'), ':</b> {reference}</td>',
                    '</tr>',
                    '<tr>',
                    '<td><b>', $.t('main.timeStamp'), ':</b> {timestamp:this.dateFormat}</td>',
                    '</tr>',
                    '<tr>',
                    '<td><b>', $.t('main.local'), ':</b> {local}</td>',
                    '</tr>',
                    '</table>',
                    {
                        /***
                         * Will format the date on a human readable format
                         * @param timestamp
                         * @returns {String}
                         */
                        dateFormat: function (timestamp) {
                            return Ext.Date.format(new Date(timestamp), 'd-m-Y | H:i');
                        }
                    }
                ),
                store: Ext.create('Ext.data.Store', {
                    model: 'Mobile-app.model.Mobile',
                    listeners: {
                        load: function (store, records, successful, operation, eOpts) {
                            //reload list every X seconds
                            //Ext.defer(Ext.getCmp('mobileList').getStore().load, 1000, this);
                        }
                    }
                }),
                items: [
                    {
                        xtype: 'toolbar',
                        docked: 'top',

                        items: [
                            { xtype: 'spacer' },
                            {
                                itemId: 'search',
                                xtype: 'searchfield',
                                placeHolder: $.t('main.search') + '...'
                            },
                            { xtype: 'spacer' }
                        ]
                    }
                ]
            }
        ],
        listeners: [
            {
                delegate: '#mobileList',
                event: 'itemtap',
                fn: 'showDetails'
            },
            {
                delegate: '#search',
                event: 'keyup',
                fn: 'filterList'
            },
            {
                delegate: '#search',
                event: 'clearicontap',
                fn: 'clearFilter'
            }
        ]
    },

    /***
     * Called whenever an item of this list is tapped
     * @param list Ext.DataView.List
     * @param index The index of the item tappe
     * @param target The element or DataItem tapped
     * @param record The record associated to the item
     * @param e The event object
     * @param eOpts The options object passed to Ext.util.Observable.addListener
     */
    showDetails: function (list, index, target, record, e, eOpts) {
        this.fireEvent('showDetails', list, record);
    },

    /***
     * The search field
     * @param field
     */
    filterList: function(field){
        this.fireEvent('filterList', this, this.down('list'), field);
    },

    /***
     * Will clear the filter on the list
     */
    clearFilter: function(){

        this.fireEvent('clearFilter', this.down('list'));

    }
});